<template>
  <view>
    <view class="f_row_center" style="padding: 30rpx;margin-top: 77rpx">
      <image src="/static/select_data.png" style="height: 48rpx;width: 48rpx;margin-right: 30rpx"/>
      <view style="font-size: 30rpx">筛选</view>
    </view>
    <view v-for="(item,ind) in list" :key="ind" style="margin: 0 20rpx">
      <view style="color:#999999;font-size: 24rpx;padding: 30rpx">{{ item.title }}</view>
      <view class="f_row_center" style="flex-flow: wrap">
        <view @click="itemClick(item.title,ind,index)" v-for="(it,index) in item.list" :key="index"
              :class="[it.isChose?'item-select':'item-normal']">
          <view>{{ it.title }}</view>
        </view>
      </view>

    </view>
    <view style="position: fixed;bottom: 0;width: 100%;">
      <view style="background: #F8F8F8;height: 10rpx"></view>
      <view class="f_row_center" style="margin: 20rpx 40rpx;">
        <button @click="cancel" class="cancel-btn flex_1" style="">关闭</button>
        <view style="width: 30rpx"></view>
        <button @click="sure" class="common-btn flex_1" style="height: 84rpx;line-height: 84rpx;margin-top: 0">确认
        </button>
      </view>
    </view>
    <view style="height: 164rpx"></view>
  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";

@Component({
  components: {}
})
export default class DrawSelectView extends Vue {
  @Prop() list?: any;

  ind = 0;
  index = 0;
  title=''
  itemClick(title:any,ind: any, index: any) {
    this.title=title;
    this.ind = ind;
    this.index = index;
    this.list[ind].list.forEach((item:any)=>{
      item.isChose=false;
    })
    this.list[ind].list[index].isChose=true;
    this.$forceUpdate();
    console.log(this.list,"itemClick>>>");
  }

  cancel() {
    this.$emit('cancel')
  }

  sure() {
    this.$emit('sure',this.title, this.ind, this.index)
  }

}
</script>

<style scoped>
.item-normal {
  background: #F8F8F8;
  border-radius: 8rpx;
  padding: 10rpx 20rpx;
  min-width: 120rpx;
  text-align: center;
  margin: 10rpx;
  font-size: 28rpx;
}

.item-select {
  background: #4575F2;
  border-radius: 8rpx;
  padding: 10rpx 20rpx;
  min-width: 120rpx;
  text-align: center;
  margin: 10rpx;
  font-size: 28rpx;
  color: #ffffff;
}

.cancel-btn {
  height: 84rpx;
  border-radius: 50rpx;
  background: #FFFFFF;
  border: 2rpx solid #3F77F4;
  font-size: 32rpx;
  line-height: 84rpx;
  color: #3F77F4;
}
</style>